<template>
  <!-- 登录 与 排行榜 -->
  <!-- 都需要发送请求 -->
  <div class="login-container">
    <!-- 用户名 -->
    <div class="user" v-if="requStore.isLogin">
      <div class="user-name">
        <el-popconfirm
          title="是否退出登录"
          :hide-icon="true"
          @confirm="handleLogOut"
        >
          <el-button type="text" slot="reference">{{
            requStore.user.userName
          }}</el-button>
        </el-popconfirm>
      </div>
    </div>
    <!-- 按钮区 -->
    <div class="btns">
      <el-tooltip
        class="item"
        effect="dark"
        content="登录"
        placement="top-start"
      >
        <el-button
          type="success"
          icon="el-icon-user"
          circle
          size="mini"
          @click="isShowLogin = true"
          :style="{
            background: '#9ee4ff',
            border: '1px solid #9ee4ff',
          }"
        ></el-button>
      </el-tooltip>
      <el-tooltip
        class="item"
        effect="dark"
        content="排行榜"
        placement="top-start"
      >
        <el-button
          type="success"
          icon="el-icon-s-data"
          circle
          size="mini"
          @click="handleClickRinking"
          :style="{
            background: 'linear-gradient(135deg,#ffab8a,#a44343)',
            border: '1px solid #cb7062',
          }"
        ></el-button>
      </el-tooltip>
    </div>
    <!-- 登录窗口 -->
    <el-dialog
      :title="logTitle"
      :visible.sync="isShowLogin"
      :width="infoStore.isMobile ? '280px' : '410px'"
      :before-close="handleClose"
      :top="infoStore.isMobile ? '38vh' : '16vh'"
    >
      <!-- :width="infoStore.isMobile ? '300px' : '410px'" -->
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm">
        <el-form-item label="账号" prop="userName" :label-width="formItemW">
          <el-input v-model="ruleForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass" :label-width="formItemW">
          <el-input
            type="password"
            v-model="ruleForm.pass"
            autocomplete="off"
            @keyup.enter.native="submitForm('ruleForm')"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-show="!isLoginLog"
          label="确认密码"
          prop="checkPass"
          :label-width="formItemW"
        >
          <el-input
            type="password"
            v-model="ruleForm.checkPass"
            autocomplete="off"
            @keyup.enter.native="submitForm('ruleForm')"
          ></el-input>
        </el-form-item>
        <!-- 下方按钮 -->
        <el-row>
          <el-col :span="6">
            <el-button type="text" size="mini" @click="handleReg">{{
              isLoginLog ? "注册账号" : "返回登录"
            }}</el-button>
          </el-col>
          <el-col :span="18">
            <el-form-item style="position: relative" v-loading="isLoginIng">
              <el-button
                :disabled="isLoginIng"
                type="primary"
                @click="submitForm('ruleForm')"
                >{{ loginBtnTxt }}</el-button
              >
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

    <!-- 排行列表 -->
    <div
      class="wrapper"
      v-show="isShowRanking"
      @click.self="isShowRanking = false"
    >
      <transition name="el-zoom-in-top">
        <div class="ranking" v-show="isShowRanking">
          <div class="title">
            <div
              class="el-icon-arrow-left"
              @click="handleArrow(showLevel - 1)"
            ></div>
            第{{ showLevel }}关 排行榜
            <div
              class="el-icon-arrow-right"
              @click="handleArrow(showLevel + 1)"
            ></div>
          </div>
          <div class="ranking-list">
            <div
              v-for="(item, i) in ranking"
              :key="item[0]"
              class="ranking-item"
            >
              <div class="num-box" :span="5">
                <div :class="retNum(i + 1)">{{ i + 1 }}</div>
              </div>
              <div class="userName" :span="9">{{ item[0] }}</div>
              <div class="time" :span="10">{{ formatTime(item[1]) }}</div>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import delay from "@/utils/delay";
import debounce from "@/utils/debounce";
import formatTime from "@/utils/formatTime";
import levelData from "@/store/levelData";
import { getUsers, setUsers } from "@/api/user";
import { getRanking, setRanking } from "@/api/ranking";
import getCardVoice from "@/assets/audio/succVoice/1.mp3";
import { md5 } from "@/utils/md5";
export default {
  data() {
    // 表单验证
    var checkId = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("账号不能为空"));
      }
      if (!this.isLoginLog && value.length > 10) {
        return callback(new Error("用户名过长"));
      }
      callback();
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (!this.isLoginLog && value.length < 6) {
          return callback(new Error("密码应大于等于6位"));
        }
        if (!this.isLoginLog && value.length > 16) {
          return callback(new Error("密码应小于等于16位"));
        }
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (this.isLoginLog) {
        // 如果是登录窗口
        callback();
      } else {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error("两次密码不一致"));
        } else {
          callback();
        }
      }
    };
    return {
      infoStore: this.$store.state.info,
      cardStore: this.$store.state.cards,
      requStore: this.$store.state.requestData,
      isShowLogin: false, // 是否显示登录窗口
      isShowRanking: false, // 是否显示排行榜
      isLoginLog: true, // 是否是登录窗口, false表示注册窗口
      isLoginIng: false, // 是否处在登录/注册状态 [是否显示加载动画]
      users: [], // 获取的所有用户信息
      showLevel: this.$store.state.cards.levelNum, //显示排行的关卡
      // startTimeStamp: 0, // 关卡开始的时间戳
      levelTime: 0, // 当前关卡的时间
      timerId: "", // 关卡计时器的id
      ruleForm: {
        userName: "",
        pass: "",
        checkPass: "",
      },
      rules: {
        userName: [{ validator: checkId, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },
  computed: {
    // 登录窗口的标题
    logTitle() {
      if (this.isLoginLog) {
        if (this.requStore.isLogin) {
          return "切换账号";
        } else {
          return "登录账号";
        }
      } else {
        return "注册账号";
      }
    },
    // 登陆项文字的宽度
    formItemW() {
      let w = this.isLoginLog ? 70 : 100;
      if (this.infoStore.isMobile) {
        w *= 0.5;
      }
      return parseInt(w) + "px";
    },
    // 登录按钮显示的文本
    loginBtnTxt() {
      if (this.isLoginLog) {
        // 登录
        return "登录";
      } else {
        // 注册
        return "注册";
      }
    },
    // 当前关卡的排行的数组
    ranking() {
      return this.requStore.ranking[this.showLevel];
    },
  },
  async created() {
    this.submitForm = debounce(this.submitForm, 200); // 函数防抖, 防止登录被多次触发
    // 恢复登录
    const userJson = localStorage.getItem("CheckBlock"); // 从本地获取历史登录信息
    if (userJson) {
      const user = JSON.parse(userJson); // 将JSON格式的字符串转换为对象或数组
      await this.validateLogin(user.userName, user.pwd, "start");
    }
  },
  async mounted() {
    await delay(500);
    // 对ranking的 次序插入测试
    // this.$store.commit("requestData/addRanking", {
    //   levelNum: 1,
    //   userName: "test>>>>>",
    //   time: 22,
    // });
    // 监听关卡开始
    this.$bus.$on("levelModeStart", this.handleLevelModeStart);
    this.$bus.$on("levelModeSuccess", this.handleLevelSuccess);
  },
  beforeDestroy() {
    // 移除监听
    this.$bus.$off("levelModeStart", this.handleLevelModeStart);
    this.$bus.$off("levelModeSuccess", this.handleLevelSuccess);
  },
  methods: {
    formatTime,
    // 提交登录
    submitForm(formName) {
      if (this.isLoginIng) {
        return; // 正在登录
      }
      this.$refs[formName].validate((valid, msg) => {
        if (valid) {
          console.log("表单验证成功!");
          if (this.isLoginLog) {
            // 如果是登录窗口
            this.validateLogin(this.ruleForm.userName, this.ruleForm.pass); // 登录验证
          } else {
            // 如果是注册窗口
            this.validateReg(this.ruleForm.userName, md5(this.ruleForm.pass)); // 登录验证, md5加密
          }
        } else {
          console.log("表单验证失败!!");
          return false;
        }
      });
    },
    // 获取所有用户信息, 记录在this.users中, 返回{isSuccess: xxx, msg: xxx}
    async getUsersInfo() {
      let isSuccess = true; // 是否请求成功
      let msg = ""; // 登录的文本信息
      try {
        const resp = await getUsers(); // 从cos获取用户数据 [get请求]
        if (resp.status === 200 || resp.status === 304) {
          this.users = resp.data; // 记录所有用户信息
        } else {
          isSuccess = false;
          msg = "系统错误";
        }
      } catch (err) {
        console.log(err);
        isSuccess = false;
        msg = "请连接网络";
      }
      return { isSuccess, msg };
    },
    // 登录验证 [用户名, 密码, 验证发生的时间段] 时间段: start[回复登录] login[登录阶段]
    async validateLogin(userName, pwd, time = "login") {
      if (this.isLoginIng) {
        return; // 正在登录
      }
      this.isLoginIng = true;
      let isSuccess = true; // 是否成功登录
      let msg = ""; // 登录的文本信息
      const resp = await this.getUsersInfo();
      isSuccess = resp.isSuccess;
      msg = resp.msg;
      let user;
      if (isSuccess) {
        // 根据id获取用户信息
        user = this.users.find((item) => item.userName === userName);
        if (user) {
          if (pwd === user.pwd || md5(pwd) === user.pwd) {
            // 最开始的密码的数据没有加密, 所以需要判断两种情况
            isSuccess = true;
            msg = "登录成功!";
          } else {
            isSuccess = false;
            msg = "密码错误";
          }
        } else {
          isSuccess = false;
          msg = "用户不存在";
        }
      }
      if (isSuccess) {
        // 登录验证通过
        this.$store.commit("requestData/setIsLogin", true); // 记为登录状态
        // 记录用户信息
        this.$store.commit("requestData/setUser", {
          userName,
          pwd: pwd === user.pwd ? pwd : md5(pwd), // 值记录加密的密码
          cards: user.cards,
        });
        // 将用户信息记录到本地
        const userJson = JSON.stringify({
          userName: user.userName,
          pwd: user.pwd,
        }); // 将对象或数组转换为JSON格式
        // localStorage.setItem("myLevel", user.level); // levelNum存入本地
        localStorage.setItem("myCards", user.cards); // cards存入本地
        localStorage.setItem("CheckBlock", userJson); // user存入本地
        this.$store.commit("cards/getCards"); // 从本地获取卡片
        // this.$store.commit("cards/getLevel"); // 从本地获取关卡进度
        this.resetForm("ruleForm"); // 重置表单
        this.isShowLogin = false; // 关闭登录窗口
      }
      console.log(msg);
      this.isLoginIng = false;
      if (time !== "start") {
        // 显示一个弹窗 [初始加载阶段[恢复登录]不显示]
        this.$message({
          showClose: true, // 是否显示关闭按钮
          message: msg, // 内容
          duration: 3500, // 显示时间
          type: isSuccess ? "success" : "error", // 弹窗类型
          offset: this.infoStore.popOffset, // 距离顶部距离 [当前为自适应]
        });
      }
    },
    // 注册验证
    async validateReg(userName, pwd) {
      if (this.isLoginIng) {
        return; // 正在登录
      }
      this.isLoginIng = true;
      let isSuccess = true;
      let msg = "";
      const resp = await this.getUsersInfo();
      isSuccess = resp.isSuccess;
      msg = resp.msg;
      if (isSuccess) {
        const isUserName = this.users.find(
          (item) => item.userName === userName
        ); // 是否存在重复名
        if (isUserName) {
          isSuccess = false;
          msg = "用户名重复";
        } else {
          const cardsPwd = localStorage.getItem("myCards"); // 读取本地卡片
          // const myLevelPwd = localStorage.getItem("myLevel");
          this.users.push({
            userName,
            pwd,
            cards: cardsPwd ? cardsPwd : "",
            // level: myLevelPwd ? myLevelPwd : "",
          }); // 存入所有用户信息中
          try {
            const resp = await setUsers(this.users); // 将更新后的用户信息存入cos中 [put 请求]
            if (resp.status === 200 || resp.status === 304) {
              // 注册验证通过
              msg = "注册成功";
              // 切换为当前登陆的用户
              this.$store.commit("requestData/setIsLogin", true); // 记为登录状态
              this.$store.commit("requestData/setUser", {
                userName,
                pwd,
                cards: cardsPwd,
              });
              // 将用户信息记录到本地
              const userJson = JSON.stringify({
                userName,
                pwd,
              }); // 将对象或数组转换为JSON格式
              localStorage.setItem("CheckBlock", userJson); // user存入本地
              this.resetForm("ruleForm"); // 重置表单
              this.isShowLogin = false; // 关闭登录窗口
            } else {
              msg = "系统错误";
              isSuccess = false;
            }
          } catch (err) {
            console.log(err);
            this.$consolelog(err);
            isSuccess = false;
            msg = "请连接网络";
          }
        }
      }
      if (isSuccess) {
        this.isLoginLog = true;
      }
      this.isLoginIng = false;
      // 显示一个弹窗
      this.$message({
        showClose: true, // 是否显示关闭按钮
        message: msg, // 内容
        duration: 3500, // 显示时间
        type: isSuccess ? "success" : "error", // 弹窗类型
        offset: this.infoStore.popOffset, // 距离顶部距离 [当前为自适应]
      });
    },
    // 退出登录
    handleLogOut() {
      this.$store.commit("requestData/setIsLogin", false); // 设置登录状态为false
      // 清除本地记录
      // localStorage.setItem("myLevel", "");
      localStorage.setItem("CheckBlock", "");
      localStorage.setItem("myCards", "");
      // this.$store.commit("cards/getLevel"); // 从本地获取关卡
      this.$store.commit("cards/getCards"); // 从本地获取卡片
      this.$message({
        showClose: true, // 是否显示关闭按钮
        message: "账号已退出", // 内容
        duration: 3000, // 显示时间
        type: "success", // 弹窗类型
        offset: this.infoStore.popOffset, // 距离顶部距离 [当前为自适应]
      });
    },
    // 重置表单
    resetForm(formName) {
      if (this.isShowLogin) {
        this.$refs[formName].resetFields();
      }
    },
    // 点击注册账号按钮
    handleReg() {
      if (this.isLoginIng) {
        this.$message({
          showClose: true, // 是否显示关闭按钮
          message: "正在" + this.isLoginLog ? "登录" : "注册" + "中", // 内容
          duration: 3000, // 显示时间
          type: "warning", // 弹窗类型
          offset: this.infoStore.popOffset, // 距离顶部距离 [当前为自适应]
        });
        return;
      }
      this.resetForm("ruleForm"); // 重置表单
      this.isLoginLog = !this.isLoginLog;
    },
    // 关闭弹出框
    async handleClose(done) {
      this.resetForm("ruleForm"); // 重置表单
      done();
      await delay(500);
      this.isLoginLog = true;
      this.isLoginIng = false;
    },
    // 点击排行
    handleClickRinking() {
      this.isShowRanking = !this.isShowRanking;
    },
    // 切换排行显示
    handleArrow(num) {
      if (num < 1) {
        this.showLevel = 1;
      } else if (num > levelData.length) {
        this.showLevel = levelData.length;
      } else {
        this.showLevel = num;
      }
    },
    // 关卡开始 [计时]
    async handleLevelModeStart() {
      console.log("开始计时");
      let startTimeStamp;
      this.levelTime = 0;
      let curTimeStamp; // setInterval中的当前时间戳
      let interval; // 时间差 [s]
      this.timerId = setInterval(() => {
        if (!this.infoStore.isBanCardClick) {
          if (!startTimeStamp) {
            startTimeStamp = new Date().getTime();
          }
          curTimeStamp = new Date().getTime();
          interval = Math.floor((curTimeStamp - startTimeStamp) / 1000);
          this.levelTime = interval;
          this.$store.commit("cards/setLevelTime", interval); // 更新时间
        }
      }, 500);
      this.$store.commit("cards/setLevelTimerId", this.timerId); // 记录timerId
    },
    // 关卡结束 [过关]
    async handleLevelSuccess() {
      clearInterval(this.timerId); // 暂停计时
      let isPut = true; // 是否需要发送put请求记录到排行榜
      let msg = ""; // 提示消息
      let meIndex = -1; // 记录 我 在ranKing中的索引位, 如果没有则为-1
      const curLevel = this.cardStore.levelNum; // 当前关卡
      if (!this.requStore.isLogin || !this.cardStore.isPass) {
        // 未登录 或 使用过卡片的跳过关卡效果
        isPut = false;
      }
      if (isPut && this.levelTime < this.requStore.rankingMax[curLevel]) {
        // 如果可能上榜 [get请求排行数据]
        if (this.levelTime <= 5) {
          console.log("数据异常");
          this.$message({
            showClose: true, // 是否显示关闭按钮
            message: "数据异常", // 内容
            duration: 3500, // 显示时间
            type: "error", // 弹窗类型
            offset: this.infoStore.popOffset, // 距离顶部距离 [当前为自适应]
          });
        }
        // console.log("可能");
        try {
          const resp = await getRanking(); // 从cos中获取排行数据 [get 排行]
          // console.log("get", resp);
          if (resp.status === 200 || resp.status === 304) {
            const ranking = resp.data;
            localStorage.setItem("CheckBlockRanking", JSON.stringify(ranking)); // 存储排行数据到本地
            this.$store.commit("requestData/setRanking", ranking); // 存储排行数据到仓库
            const curRanking = ranking[curLevel]; // 当前关卡的排行
            // 如果put请求时发出的数据合理, 这里就不需要下一行语句了, 直接读取最后一项就可以了
            // const maxTime = getMaxArr(curRanking, 1)[1]; // 当前关卡榜上的最大时间
            const maxTime = curRanking[curRanking.length - 1]; // 当前关卡榜上的最大时间
            // 找到ranking中的自己的索引
            for (let i = 0; i < curRanking.length; i++) {
              const item = curRanking[i];
              if (item[0] === this.requStore.user.userName) {
                meIndex = i;
                break;
              }
            }
            if (curRanking.length >= 30) {
              // 榜上满人 [按理说只可能===30]
              if (this.levelTime >= maxTime) {
                // 未上榜
                // console.log("未上榜");
                isPut = false;
              } else {
                // console.log("上榜");
                // 上榜
                if (meIndex !== -1) {
                  // 榜上有自己
                  // console.log("有自己", isPut);
                  if (this.levelTime >= curRanking[meIndex][1]) {
                    // 用时比原来多
                    // console.log("用时更多了");
                    isPut = false;
                  }
                }
              }
            } else {
              // 榜上人未满
              // console.log("人未满");
              if (meIndex !== -1) {
                // 榜上有自己
                // console.log("有自己", me, isPut);
                if (this.levelTime >= curRanking[meIndex][1]) {
                  // console.log("用时更多了");
                  // 用时比原来多
                  isPut = false;
                }
              }
            }
          } else {
            msg = "系统错误, 无法获取排行榜数据";
          }
        } catch (err) {
          console.log(err);
          // msg = "连接网络后才可更新排行榜呢";
        }
        // console.log(">>>>>>>><", isPut);
        //______________________________________________________________________________
        if (isPut) {
          // 确定上榜 [put请求]
          try {
            if (meIndex === -1) {
              // 如果排行榜中原本没有 我
              // 按照成绩[秒数]插入ranking数组中
              this.$store.commit("requestData/addRanking", {
                levelNum: curLevel,
                userName: this.requStore.user.userName,
                time: this.levelTime,
              });
            } else {
              // 如果原本有 我
              // 更新自己的数据
              this.$store.commit("requestData/updateMyRanking", {
                levelNum: curLevel,
                i: meIndex,
                time: this.levelTime,
              });
            }
            const resp = await setRanking(this.requStore.ranking);
            // console.log("put>>>>>>", resp);
            if (resp.status === 200 || resp.status === 304) {
              msg =
                meIndex === -1
                  ? "恭喜你成功登上排行榜!"
                  : "恭喜你刷新自己的记录!";
              if (this.infoStore.isVolume) {
                // 播放声音
                var player = new Audio(getCardVoice);
                player.play(); //播放 mp3这个音频对象
              }
            } else {
              msg = "系统错误, 无法更新排行榜数据";
            }
          } catch (err) {
            console.log(err);
            // msg = "连接网络后才可更新排行榜呢";
          }
        }
        if (msg) {
          this.$message({
            showClose: true, // 是否显示关闭按钮
            message: msg, // 内容
            duration: 3500, // 显示时间
            type: isPut ? "success" : "error", // 弹窗类型
            offset: this.infoStore.popOffset, // 距离顶部距离 [当前为自适应]
          });
        }
      }
      await delay(1000);
      this.$store.commit("cards/setLevelTime", 0);
    },
    // 给排名前三的序号加上特殊样式
    retNum(i) {
      if (i === 1) {
        return "num1 num";
      } else if (i === 2) {
        return "num2 num";
      } else if (i === 3) {
        return "num3 num";
      } else {
        return "num";
      }
    },
  },
};
</script>

<style lang="less">
@import "~@/styles/mixin.less";
@H: 38px;
.login-container {
  display: flex;
  align-items: flex-start;
  margin-top: -50px;
  margin-right: 85px;
  position: absolute;
  right: 0;
  // 用户名
  .user {
    .user-name {
      height: @H;
      // line-height: @H;
      margin-right: 18px;
      > span {
        display: block;
        // height: @H;
        // line-height: @H;
      }
      .el-popover__reference-wrapper {
        display: block;
        // height: @H;
        // line-height: @H;
        .el-button.el-button--text.el-popover__reference {
          display: block;
          color: #90e0ff;
          padding: 0;
          span {
            display: block;
            line-height: @H;
            height: @H;
          }
          &:hover {
            color: #5bd1ff;
          }
        }
      }
    }
  }
  // 按钮区
  .btns {
    display: flex;
    height: @H;
    button.el-button.is-circle {
      font-size: 20px;
      margin-left: 10px;
      width: @H;
      height: @H;
    }
  }
  // 关闭按钮
  .el-dialog__close.el-icon.el-icon-close {
    font-size: 20px;
  }
  .el-icon-loading {
    font-size: 20px;
    left: 0px;
  }
  // 表单部分
  div.el-dialog__body {
    padding-right: 30px;
    padding-top: 10px;
    padding-bottom: 5px;
    // 注册按钮
    .el-button.el-button--text.el-button--mini {
      color: #888;
      &:hover {
        color: #5aabff;
      }
    }
    .el-button.el-button--default {
      margin-left: 20px;
    }
  }

  // 排行榜
  .wrapper {
    z-index: 2007;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    margin: 0;
    background: rgba(0, 0, 0, 0.2);
    @ranW: 320px;
    @ranH: 510px;
    // 背景旋转卡片
    &::before {
      content: "";
      display: block;
      width: @ranW;
      height: @ranH;
      background: #effdff;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) rotate(-7deg);
      z-index: 2000;
    }
    .ranking {
      z-index: 2008;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: @ranW;
      height: @ranH;
      background: #fff;
      box-sizing: border-box;
      .title {
        height: 30px;
        line-height: 30px;
        font-size: 24px;
        margin-top: 15px;
        margin-bottom: 10px;
        .el-icon-arrow-left,
        .el-icon-arrow-right {
          margin: 0 20px;
          &:hover {
            cursor: pointer;
            color: #5aabff;
          }
        }
      }
      // 排行列表
      .ranking-list {
        max-height: 435px;
        padding: 0 15px;
        box-sizing: border-box;
        overflow-y: scroll;
        font-size: 16px;
        // 隐藏滚动条, 但可滚动
        &::-webkit-scrollbar {
          display: none;
        }
        .ranking-item {
          height: 30px;
          line-height: 30px;
          margin: 8px 0;
          display: flex;
          justify-content: flex-start;
          > div {
            text-align: start;
          }
        }
        :first-child {
          margin-top: 0;
        }
      }
      .userName {
        margin-right: 8px;
        overflow: hidden;
        flex: 0 0 130px;
      }
      .time {
        overflow: hidden;
      }
      // 列表序号
      .num-box {
        height: 100%;
        display: flex;
        margin-right: 10px;
        @numSize: 18px;
        flex: 0 0 60px;
        .center();
        .num {
          color: #e3b866;
          text-align: center;
        }
        .num1 {
          width: @numSize;
          height: @numSize;
          line-height: @numSize;
          color: #333;
          background: #d05151;
          border-radius: 3px;
        }
        .num2 {
          width: @numSize;
          height: @numSize;
          line-height: @numSize;
          color: #333;
          background: rgb(255, 116, 41);
          border-radius: 3px;
        }
        .num3 {
          width: @numSize;
          height: @numSize;
          line-height: @numSize;
          color: #333;
          background: #ffe95d;
          border-radius: 3px;
        }
      }
    }
  }
}
</style>
